<template>
    <div class="map-container">
        <div id="cesiumContainer" ref="cesiumContainer"></div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css"
import "mars3d/mars3d.css"
import * as mars3d from "mars3d"
import "mars3d-space"
import { useElementSize } from '@vueuse/core'

// 地图容器引用
const cesiumContainer = ref(null)
const { width, height } = useElementSize(cesiumContainer)

// 地图相关数据
const map = ref(null)
// 初始化地图
const initMap = () => {
    // 设置Cesium ion token（如果需要）
    // Cesium.Ion.defaultAccessToken = 'your-cesium-ion-token'
    mars3d.Log.hasInfo(false)
    // 创建地图实例
    map.value = new mars3d.Map(cesiumContainer.value, {
        scene: {
            center: { lng: 116.3, lat: 39.9, alt: 10000, heading: 0, pitch: -90 },
            // 关键配置
            creditContainer: null,  // 直接禁用Cesium的版权容器
            showCredit: false
        },
        control: {
            logo: false,
            copyright: false,
            watermark: false
        },
        basemaps: [
            {
                name: '天地图影像',
                icon: 'img/basemaps/tdt_img.png',
                type: 'tdt',
                layer: 'img_d',
                show: true
            }
        ]
    })

}



// 组件挂载时初始化
onMounted(() => {
    initMap()
})

// 组件卸载前销毁地图
onBeforeUnmount(() => {
    if (map.value) {
        map.value.destroy()
    }
})
</script>

<style scoped></style>